<template>
  <el-submenu
    :index="menuData.name"
  >
    <template #title>
      <div>
        <i v-if="menuData.meta.icon" :class="['fa',menuData.meta.icon]"></i>
        <span>{{getMenuTitle(menuData.meta.lang)}}</span>
      </div>
    </template>
    <template v-for="(item,index) in menuData.children" :key="index">
      <Submenus v-if="item.children && item.children.length > 0" :menu-data="item"></Submenus>
      <el-menu-item
        v-else
        :index="item.children ? item.children[0].path : item.path"
      >
        <div v-if="item.children">
          <i v-if="item.children[0].meta.icon" :class="['fa',item.children[0].meta.icon]"></i>
          <span>{{getMenuTitle(item.children[0].meta.lang)}}</span>
        </div>
        <div v-else>
          <i v-if="item.meta.icon" :class="['fa',item.meta.icon]"></i>
          <span>{{getMenuTitle(item.meta.lang)}}</span>
        </div>
      </el-menu-item>
    </template>
  </el-submenu>
</template>

<script lang="ts">
  import {defineComponent,ComponentInternalInstance, getCurrentInstance, nextTick} from "vue";
  import utils from '@/lib/utils'
  export default defineComponent({
    name: "Submenus",
    props: {
      menuData: {
        type: Object,
        default: null
      },
    },
    setup() {
      const instance = <ComponentInternalInstance> getCurrentInstance();
      const getMenuTitle = (value: string) => {
        return utils.getMenusLocaleValue(instance, value)
      }
      return {
        getMenuTitle
      }
    },
  })
</script>

<style lang="scss" scoped>
  .el-menu-vertical-demo {
    border: 0;
  }

  .el-submenu__title span, .el-submenu__title i {
    color: #dbdbdb;
  }

  .el-menu li, .el-menu i {
    color: #dbdbdb;
  }

  .el-menu i, .el-submenu__title i {
    margin-right: 0.4rem;
  }

  .el-menu li:hover, .el-submenu__title:hover span, {
    color: #fff;
  }
</style>
